<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    单价: <input type="text" v-model.number='price'> <br>
    数量: <input type="text" v-model.number='count'> <br>
    总金额为: {{sum | run}}
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    // 计算总金额, 如果总金额大于0, 则在金额后面加上一个 '元' 字, 如10元, 如果总金额为0, 则只显示0
    var vm = new Vue({
      el: '#app',
      data: {
        price: '',
        count: '',
        sum:''
      },
      //方法
      methods: {
        // targetSum:function(){
        //   this.sum = this.price * this.count
        //   if(this.sum > 0) {
        //       return this.sum +'元'
        //     } else {
        //      return this.sum
        //     }
        // }
      },
      //计算属性
      computed:{
        // targetSum:function(){
        //      this.sum = this.price * this.count
        //     if(this.sum > 0) {
        //       return this.sum +'元'
        //     }
        // }
      },
      //侦听器
      watch:{
        price:function(){
          this.sum = this.price * this.count
        },
        count:function(){
          this.sum = this.price * this.count
        }
      },
      //过滤器
      filters:{
        run:function(val){
         return val > 0? val+'元':val
        }
      }
    });
  </script>
</body>
</html>
